<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/element.js"></script>
    <script src="../../js/tinymce/tinymce.min.js"></script>
    <script src="../../js/base.js"></script>
    <script src="../../js/Sortable-1.10.2.js"></script>
    <script src="../../js/vuedraggable.umd.js"></script>
    <link rel="stylesheet" href="../files/css/element.css">
    <script src="../files/js/element.js"></script>
</head>
<body>
<div id="app" style="width:800px">

    <el-table :data="tableData"
              border
              row-key="id"
              align="left">
        <el-table-column v-for="(item, index) in col"
                         :key="`col_${index}`"
                         :prop="dropCol[index].prop"
                         :label="item.label">
        </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
</div>

</body>

<script>
    Vue.component('Sortable', window.Sortable.name);
    // import Sortable from 'sortablejs'
    new Vue( {
        el:"#app",
        data: {
                col: [
                    {
                        label: '日期',
                        prop: 'date'
                    },
                    {
                        label: '姓名',
                        prop: 'name'
                    },
                    {
                        label: '地址',
                        prop: 'address'
                    }
                ],
                dropCol: [
                    {
                        label: '日期',
                        prop: 'date'
                    },
                    {
                        label: '姓名',
                        prop: 'name'
                    },
                    {
                        label: '地址',
                        prop: 'address'
                    }
                ],
                tableData: [
                    {
                        id: '1',
                        date: '2016-05-02',
                        name: '王小虎1',
                        address: '上海市普陀区金沙江路 100 弄'
                    },
                    {
                        id: '2',
                        date: '2016-05-04',
                        name: '王小虎2',
                        address: '上海市普陀区金沙江路 200 弄'
                    },
                    {
                        id: '3',
                        date: '2016-05-01',
                        name: '王小虎3',
                        address: '上海市普陀区金沙江路 300 弄'
                    },
                    {
                        id: '4',
                        date: '2016-05-03',
                        name: '王小虎4',
                        address: '上海市普陀区金沙江路 400 弄'
                    }
                ]
        },
        mounted() {
            this.rowDrop()
            this.columnDrop()
        },
        methods: {
            //行拖拽
            rowDrop() {
                const tbody = document.querySelector('.el-table__body-wrapper tbody')
                const _this = this
                Sortable.create(tbody, {
                    onEnd({ newIndex, oldIndex }) {
                        const currRow = _this.tableData.splice(oldIndex, 1)[0]
                        _this.tableData.splice(newIndex, 0, currRow)
                    }
                })
            },
            //列拖拽
            // columnDrop() {
            //     const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
            //     this.sortable = Sortable.create(wrapperTr, {
            //         animation: 180,
            //         delay: 0,
            //         onEnd: evt => {
            //             const oldItem = this.dropCol[evt.oldIndex]
            //             this.dropCol.splice(evt.oldIndex, 1)
            //             this.dropCol.splice(evt.newIndex, 0, oldItem)
            //         }
            //     })
            // }
        }
    })
</script>
</html>
